{extend name="public/base"}

{block name="title"}就行天下-购物车{/block}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/home/css/index.css" />
{/block}

{block name="main"}
<div class="pageControl bg-f5">
    <div class="main-top"></div>
    <div class="msui_nav msui_navTop noBorder">
        <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back"></i></a>
        <h1 class="msui_navTop-title">购物车</h1>
        <a href="javascript:;" class="msui_navTop-right msui_navTop-cnav"><i class="micon-cnav"></i></a>
    </div>
    {empty name="data"}
    <!--没有商品-->
    <div>
        <img src="__STATIC__/home/images/nocar.png" alt="">
        <p class="fs06 text-center">您的购物
            <!--有商品-->
        <div class="fs06 text-center">车中没有商品，请先挑选您心爱的商品</p>
        <a href="/" class="cl-f bg-c40 shoppingCart-btn">逛一逛</a>
    </div>
    {else /}
    <form action='{:url("order/affirm_order", ["request" => "cart"])}' method="get">
        <!--购物车列表-->
        <div class="cartList  weui-cells_checkbox js-checkbox">
            {volist name="data" id="vo"}
            <div class="pl mtop05">
                <div class="weui-cell">
                    <div class="weui-cell__hd indentImg">
                        <img src="{$vo.logo}" alt="">
                    </div>
                    <div class="weui-cell__bd">
                        <p class="fs07">{$vo.name}</p>
                        <div class="my-flex1">
                            <p class="xx">
                                <!--满星星加class为 active-->
                                <span {gt name="vo.level" value="0"} class="active" {/gt}></span>
                                <span {gt name="vo.level" value="1"} class="active" {/gt}></span>
                                <span {gt name="vo.level" value="2"} class="active" {/gt}></span>
                                <span {gt name="vo.level" value="3"} class="active" {/gt}></span>
                                <span {gt name="vo.level" value="4"} class="active" {/gt}></span>
                            </p>
                            <span class="fs06 exclusive-count">{$vo.level}分</span>
                        </div>
                    </div>
                    <div class="weui-cell__ft">

                    </div>
                </div>
                {volist name="vo.list" id="v"}
                <div class="pl">
                    <label class="weui-cell confirmOrder_list  weui-check__label" for="s{$v.id}">
                        <div class="weui-cell__hd cartList-box">
                            <input type="checkbox" class="weui-check" name="cart_id[]" id="s{$v.id}" value="{$v.id}" >
                            <i class="weui-icon-checked"></i>
                            <img src="{$v.thumb}" alt="">
                        </div>
                        <div class="weui-cell__bd ">
                            <p class="fs06 listFont">{$v.product_name}</p>
                        </div>
                        <div class="weui-cell__ft fs06">

                        </div>
                    </label>
                    <div class="card_button cl-9999">
                        <p class="price">￥<span>{$v.price}</span></p>
                        <!--<p>x1</p>-->
                        <p class="buyButton mtop01">
                            <button {eq name="v.num" value="1"} disabled="disabled" {/eq} class="subtract" type="button" data-cart-id="{$v.id}">-</button>
                            <span>{$v.num}</span>
                            <button class="add" type="button" data-cart-id="{$v.id}">+</button>
                        </p>
                    </div>
                </div>
                {/volist}
            </div>
            {/volist}
        </div>
        <div class="cartBottom weui-cells_checkbox">
            <div class="cartList-box">
                <label class="weui-cell confirmOrder_list cartList-box-all  weui-check__label" for="ollSs">
                    <input type="checkbox" class="weui-check" name="checkbox2" id="ollSs">
                    <i class="weui-icon-checked"></i>
                    <span class="cl-9999 fs06">全选</span>
                </label>
                <p class="cl-3333 fs065"></p>
                <a href="javascript:;" style="margin-left: 5px;" class="delete_cart cl-8c8c">删除选中</a>
            </div>
            <a href="javascript:;" class="bg-c40 cl-f cartBottom-btn">
                结算(<span>0</span>) <span class="fs07">￥</span><span class="fs07 total">0.00</span>
            </a>
        </div>
    </form>
    {/empty}
    <!--<div class="weui-cell noBorder bg-f7">-->
        <!--<div class="weui-cell__bd text-center">-->
            <!--<p class="fs06 bothEnds">猜你喜欢</p>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="commodity mr-bottom30">-->
        <!--<div class="fashionable-list">-->
            <!--<a href="" class="fashionable-img"><img class="img-response" src="__STATIC__/home/images/product1.png" alt=""/></a>-->
            <!--<a href="" class="fs06 listFont">62度四川五粮液陶瓷瓶...</a>-->
            <!--<p class="sales my-flex">-->
                <!--<span class="fs06 cl-c40">￥999.00</span>-->
                <!--<span class="fs06">月销量10万</span>-->
            <!--</p>-->
        <!--</div>-->
        <!--<div class="fashionable-list">-->
            <!--<a href="" class="fashionable-img"><img class="img-response" src="__STATIC__/home/images/product1.png" alt=""/></a>-->
            <!--<a href="" class="fs06 listFont">62度四川五粮液陶瓷瓶（1618）500ml浓香型白酒精美包装...</a>-->
            <!--<p class="sales my-flex">-->
                <!--<span class="fs06 cl-c40">￥999.00</span>-->
                <!--<span class="fs06">月销量10万</span>-->
            <!--</p>-->
        <!--</div>-->
        <!--<div class="fashionable-list">-->
            <!--<a href="" class="fashionable-img"><img class="img-response" src="__STATIC__/home/images/product1.png" alt=""/></a>-->
            <!--<a href="" class="fs06 listFont">62度四川五粮液陶瓷瓶</a>-->
            <!--<p class="sales my-flex">-->
                <!--<span class="fs06 cl-c40">￥999.00</span>-->
                <!--<span class="fs06">月销量10万</span>-->
            <!--</p>-->
        <!--</div>-->
        <!--<div class="fashionable-list">-->
            <!--<a href="" class="fashionable-img"><img class="img-response" src="__STATIC__/home/images/product1.png" alt=""/></a>-->
            <!--<a href="" class="fs06 listFont">62度四川五粮液陶瓷瓶</a>-->
            <!--<p class="sales my-flex">-->
                <!--<span class="fs06 cl-c40">￥999.00</span>-->
                <!--<span class="fs06">月销量10万</span>-->
            <!--</p>-->
        <!--</div>-->
    <!--</div>-->
</div>
{/block}

{block name="javascript"}
<script>
    $(function () {
        $('.buyButton button.subtract').click(function () {
            $.showLoading();
            var t=$(this).next().html();
            if(t>2){
                t-=1;
            }else if(t=2){
                t=1;
                $(this).attr('disabled','disabled')
            }
            var _this = $(this);
            $.post('{:url("edit_num")}', {id: $(this).data('cart-id'), num : t}, function (msg) {
                if (msg.code == 200) {
                    _this.next().html(t);
                    total();
                } else {
                    $.toptip(msg.msg, 'error');
                }
                $.hideLoading();
            });
        });
        $('.buyButton button.add').click(function () {
            $.showLoading();
            var t=parseFloat($(this).prev().html());
            t+=1;
            var _this = $(this);
            $.post('{:url("edit_num")}', {id: $(this).data('cart-id'), num : t}, function (msg) {
                if (msg.code == 200) {
                    _this.prev().prev().removeAttr('disabled','disabled');
                    _this.prev().html(t);
                    total();
                } else {
                    $.toptip(msg.msg, 'error');
                }
                $.hideLoading();
            });
        });
        $(".js-checkbox").on('click','.confirmOrder_list',function () {
            var that=$(this);
            var that1=that.find(" i");
//   当前input的显示
            if(that1.hasClass('checked')){
                that1.prev().removeAttr('checked','checked');
                that1.removeClass('checked');
            }else{
                that1.prev().attr('checked','checked');
                that1.addClass('checked');

            }
//        input个数
            var listCount=$(".js-checkbox .weui-check").length;
//        选中的个数
            var checkCount=$(".js-checkbox .checked").length;
//        全选的时候对应的全选按钮相应的是否显示
            if (listCount==checkCount){
                $(".cartList-box-all i").addClass('checked');
                $(".cartList-box-all .weui-check").attr('checked','checked');
            }else if(listCount!=checkCount){
                $(".cartList-box-all i").removeClass('checked');
                $(".cartList-box-all .weui-check").removeAttr('checked','checked');
            }
            console.log(that1.prev().prop('checked'));
            total();
            return false;
        });
//    点击全选
        $(".cartList-box-all").click(function () {
            var that=$(this);
            var that1=that.find(" i");
            console.log(that1.prev('input').prop('checked'))
//   当前input的显示
            if(that1.hasClass('checked')){
                that1.removeClass('checked');
                that1.prev('input').removeAttr('checked','checked');
            }else{
                that1.addClass('checked');
                that1.prev('input').attr('checked','checked');
            }
//        商品input属性
            $(".js-checkbox i").each(function () {
                if(that1.hasClass('checked')){
                    $(this).addClass('checked');
                    $(this).prev('input').attr('checked','checked');
                }else{
                    $(this).removeClass('checked');
                    $(this).prev('input').removeAttr('checked','checked');
                }
            });
            total();
            return false;
        });
//    结算数量，价格
        function total() {
            var price=0;
            //            结算数量
            var count=$(".js-checkbox i.checked").length;
            $(".cartBottom-btn span").eq(0).html(count);
            $(".js-checkbox i.checked").each(function () {
                var t=$(this).parent().parent().parent().find('.price span').html();
                var count=$(this).parent().parent().parent().find('.buyButton span').html();
                price+=parseFloat(t*count);
            });
            //        判断是否为整数
//        var reg = /.*\..*/;
//        if(!reg.test(price)){
//            price=price+".00";
//        }
            $(".total").html(number_format(roundNumber(price,2)));
        }

        // 点击结算按钮
        $('.cartBottom-btn').click(function () {
            if (!$('input[type="checkbox"]:checked').length) {
                $.toptip('请选择需要购买的商品！');
                return false;
            }
            var _form = $('form');
            _form.submit();
        });

        // 点击删除按钮
        $('.delete_cart').click(function () {
            if (!$('input[type="checkbox"]:checked').length) {
                $.toptip('请选择需要删除的商品！');
                return false;
            }
            var _ids = [];
            $('input[type="checkbox"]:checked').each(function (i, d) {
                _ids.push($(this).val());
            });
            $.post('{:url("del_cart")}', {ids : _ids}, function (msg) {
                $.confirm('确定删除？', function () {
                    if (msg.code == 200) {
                        $.toptip('删除成功', 'success');
                        window.location.reload();
                    } else {
                        $.toptip(msg.msg);
                    }
                });
             }, 'json');
        });
    });
</script>
{/block}